<!--
 * @Description: 登录页
 * @Author: rendc
 * @Date: 2025-11-13 11:09:57
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-14 10:29:35
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登录</title>
  <script src="./js/jquery.js"></script>
</head>
<body>
    <div>登录</div>
    用户名 <input id="username" type="text" value="admin"><br>
    密码 <input id="password" type="text" value="admin123"><br>
    <button id="loginBtn" onclick="loginHandle()">登录</button>
</body>
<script>
  // loginHandle
  function loginHandle(){
    // 登录按钮被按下
    console.log('🤡 CC - loginHandle - loginHandle:');
    // 获取输入框中的值
    var username = $("#username").val();
    // console.log('🤡 CC - loginHandle - username:', username);
    var password = $("#password").val();
    // console.log('🤡 CC - loginHandle - password:', password);
    // 表单校验
    // 发送网络请求
    toLogin(username,password);
  }
  // 发送登录的网络请求
  function toLogin(username,password){
    // 禁用登录按钮
    $("#loginBtn").prop('disabled', true);
    // jQuery发送http的post请求
    $.ajax({
      // 接口地址
      url:"http://172.16.0.30:8088/auth/login",
      // 请求方式
      method:"POST",
      // 请求参数 - 默认是表单格式
      // 请求参数 - 表单格式序列化为 json格式
      data:JSON.stringify({
        username:username,
        password:password,
      }),
      // 指定参数是json格式
      contentType:"application/json",
      // 成功响应
      success:function(res){
        $("#loginBtn").prop('disabled', false);
        console.log('🤡 CC - res:', res);
        var code = res.code;
        if (code == 200) {
          // 登录成功
          // 跳转首页
          // window.location.href = 'http://127.0.0.1:5500/day21/index.html';
          // 获取密钥
          var {username,telephone} = res.data;
          console.log('🤡 CC - toLogin - telephone:',username, telephone);
          // 登录页拿到的信息如何传给其他页面
          // 1. 通过路由去传
          // window.location.href = 'http://127.0.0.1:5500/day22/index.html';
          // ?username='+username&'telephone='+telephone;
          // 2. 浏览器储存
          sessionStorage.setItem("username",username);
          localStorage.setItem("username","localStorage");
          var result = sessionStorage.getItem("username");
          // console.log('🤡 CC - toLogin - result:', result);
          // 3. 浏览器通信
          var child =  window.open('http://127.0.0.1:5500/day22/index.html');
          child.onload = function(){
            child.postMessage({phoneNum:telephone});
          }
        }else{
          // 登录失败
          console.log(res.message);
          // 弹窗提示 - 用户
          alert(res.message);
        }
      },
      // 失败响应
      error:function(err){
        console.log('🤡 CC - err:', err);
        $("#loginBtn").prop('disabled', false);
      },
    })
  }
  
</script>
</html>